import React from "react";
import { Outlet } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Layout,theme,ConfigProvider } from 'antd'
import LayoutHeader from "../layout/header";
const { Content} = Layout
const { darkAlgorithm, defaultAlgorithm,  } = theme
const Main = () => {
    const {
        token: { colorBgContainer,borderRadiusLG },
    } = theme.useToken();
    const storeTheme = useSelector(state => state.app.theme)
    return (
            <ConfigProvider theme={ {  algorithm: storeTheme === 'dark' ? darkAlgorithm : defaultAlgorithm } }>
            <Layout>
                <LayoutHeader />
                <Content
                    className="content"
                    style={{
                        padding: 24,
                        paddingTop: 84,
                        // background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                        height: '100vh',
                        overflow: 'hidden'
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
            </ConfigProvider>
    )
}
export default Main
